<template>
  <div>我是vue3组件</div>
  <div v-if="show">假设我是一个弹出框组件，开始是隐藏的</div>
  <h3>我是子组件里面 父组件传递进来的数据: {{ msg }}, {{ count }}</h3>
  <button @click="updateCount">子组件想修改父组件的数据</button>
</template>

<script setup>
import { ref } from 'vue';

// 如果想要在js里面 使用props里面的值，必须写一个变量 接受definePorps的返回值
const props = defineProps({
  msg: String,
  count: {
    type: Number,
    // required: true,
    default: 100,
  },
});

const emits = defineEmits(['updateCountEvent', 'abc', 'dddd']);

const updateCount = () => {
  // 子组件不能修改父组件的数据， 谁的数据谁改
  // 子组件通知 父组件去改它自己的数据
  // props.count++;  props.count = props.count + 1
  // this.$emit('事件名随便写', 参数)
  emits('updateCountEvent', props.count + 1);
};

const show = ref(false);
const openDialog = () => {
  show.value = true;
};

// 内置的 宏
// defineExpose 主动向外抛出一些数据或者方法，让父组件可以访问子组件的内容
defineExpose({
  // show,
  openDialog,
});
</script>

<script>
export default {
  beforeCreate() {
    console.log('子的beforeCreate');
  },
  created() {
    console.log('子的created');
  },
  beforeMount() {
    console.log('子的beforeMount');
  },
  mounted() {
    console.log('子的mounted');
  },
};
</script>
